<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    关注列表
                </h2>
                <div class="text-muted mt-1" id="subscribeCount"></div>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="divide-y" id="user-items-body">

                            <!-- <div class="list-group list-group-flush overflow-auto" style="max-height: 35rem;">
                                <div class="list-group-item">
                                    <div class="row">
                                        <div class="col-auto">
                                            <a href="#">
                                                <span class="avatar" style="background-image: url(./image/avatar01.jpeg);"></span>
                                            </a>
                                        </div>
                                        <div class="col text-truncate">
                                            <a href="#" class="text-body d-block">
                                                昵称
                                            </a>
                                            <div class="text-secondary text-truncate mt-n1">
                                                123456
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="btn-list">
                                                <a href="javascript:void(0);" class="btn btn-primary cancel">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-x-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16zm-9.489 5.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z" stroke-width="0" fill="currentColor" /><path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor" /></svg>
                                                    取消关注
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        // 构造查询字符串
        let userIdQueryString = '';
        let idQueryString = '';
        if (profileUserId) {
            userIdQueryString = '?userId=' + profileUserId;
            idQueryString = '?id=' + profileUserId;
        }

        $.ajax({
            type: 'get',
            url: '/user/info' + idQueryString,
            success: function(respData) {
                if (respData.code == 0) {
                    initUserInfo(respData.data);
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    });
                }
            },
            error: function() {
                $.toast({
                    heading: '错误  ',
                    text: '访问出现问题，请与管理员联系.',
                    icon: 'error'
                });
            }
        });

        function initUserInfo(user) {
            if (profileUserId && profileUserId != currentUserId) {
                $('.page-title').html(' ' + user.nickname + ' 的关注列表');
            }
            $('#subscribeCount').html('关注数量：' + user.subscribeCount)
        }

        $.ajax({
            type: 'get',
            url: '/subscribe/getSubscribeList' + userIdQueryString,
            success: function(respData) {
                if (respData.code == 0) {
                    buildList(respData.data);
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    });
                }
            },
            error: function() {
                $.toast({
                    heading: '错误  ',
                    text: '访问出现问题，请与管理员联系.',
                    icon: 'error'
                });
            }
        });

        function buildList(data) {
            if (data.length == 0) {
	            $('#user-items-body').html('没有关注任何人');
                return;
            }

            data.forEach(user => {
                // 构造html
                let userHtmlStr = ' <div class="list-group list-group-flush overflow-auto" style="max-height: 35rem;"> '
                    + ' <div class="list-group-item"> ' 
                    + ' <div class="row"> '
                    + ' <div class="col-auto"> '
                    + ' <a href="#"> <span class="avatar" style="background-image: url(./image/avatar01.jpeg);"></span> </a>'
                    + ' </div> '
                    + ' <div class="col text-truncate"> '
                    + ' <a href="#" class="text-body d-block nickname"> ' + user.nickname + ' </a> '
                    + ' <div class="text-secondary text-truncate mt-n1 remark"> </div> '
                    + ' </div> </div> </div> </div>';

                // 转为元素对象
                let userItem = $(userHtmlStr);
                // 设置个人简介
                if (user.remark) {
                    userItem.find('.remark').html(user.remark);
                }
                // 设置头像
                if (user.avatarUrl) {
                    userItem.find('.avatar').css('background-image', 'url(' + user.avatarUrl + ')');
                }
                // 设置点击事件
                userItem.find('.nickname').click(function() {
                    profileUserId = user.id;
                    // 是否为当前登录用户
                    if (profileUserId == currentUserId) {
                        profileUserId = undefined;
                    }
                    $('#forum-content').load('profile.html');
                });
                userItem.find('.avatar').click(function() {
                    profileUserId = user.id;
                    // 是否为当前登录用户
                    if (profileUserId == currentUserId) {
                        profileUserId = undefined;
                    }
                    $('#forum-content').load('profile.html');
                });

                // 添加到列表
                $('#user-items-body').append(userItem);
            });
        }
    });
</script>